<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>关于玄机</title>
    <link rel="shortcut icon" href="img/logo1.png">
    <!-- 引入css -->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/about.css">
    <!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入js -->
    <script src="js/about.js"></script>
</head>

<body>
    <div id="app" v-cloak>
        <!-- 头部区域 -->
        <header class="w">
            <div class="logo">
                <a href="./玄机科技.html"> <img :src="logoImg"></a>
            </div>
            <!-- 导航栏 start -->
            <div class="nav">
                <ul>
                    <li><a :href="about.name" target="_self">{{about.value}}</a></li>
                    <li>{{brand}}
                        <ul>
                            <li class="xl" v-for="imgSrc in imgSrc"><img :src="imgSrc"></li>
                        </ul>
                    </li>
                    <li v-for="navList in navList"><a :href="navList.name" target="_self">{{navList.value}}</a></li>
                </ul>
            </div>
            <!-- 导航栏 end-->
        </header>
        <!-- 主体区域 -->
        <main class="w">
            <!-- 滚轮 -->
            <div class="sr">
                <div class="li1">
                    <img :src="wxImg">
                    <div class="li2">
                        <img :src="QRCode">
                    </div>
                    <div class="li3">
                        <p></p>
                    </div>
                </div>
                <div class="li1" v-for="rollerBarImgList in rollerBarImgList">
                    <img :src="rollerBarImgList.img">
                    <div :class="rollerBarImgList.className"><a href="#">{{rollerBarImgList.value}}</a></div>
                </div>
            </div>

            <div class="pic">
                <img :src="pic" alt="">
            </div>
            <div class="contact">
                <img :src="about_us" alt="">
            </div>
            <div class="com">
                <span class="left-pic">
				<img :src="product" alt="">
			</span>
                <span class="right-word">
				<h3>杭州玄机科技信息技术有限公司</h3>
            	<p>
            		公司立足原创动漫影视制作，拥有从内容创作、图书音像、衍生产品、网络游戏、媒介宣传到市场发行的动漫全产业链运营能力，致力于以精工细作的品质和不断创新的艺术风格诠释“原创”二字的至高价值。
            	</p>
            	<p>
            		高起点、高定位打造中国原创动漫旗舰品牌《秦时明月》。作品在中国拥有数百万忠实观众，连续获国家广电总局“年度推荐优秀国产动画片奖”、政府最高奖 “星光奖”、省市“五个一工程奖”等国内百余项重量级奖项。并成功发行至全球37个国家和地区，荣获法国戛纳电视节亚洲展映会最佳作品、日本动漫产业白皮书推荐、美国AUTODESK最佳作品。
            	</p>
            	<p>
            		首创在长篇动画中使用3D技术和卡通渲染风格，令3D动画兼具强烈的动态效果及手绘动画的细腻唯美带给观众新鲜完美的观影享受。引进欧美流行的动态捕捉（Motion Capture）和面部捕捉（Facial Capture）技术，倾力打造国际级的武打场面和镜头效果。
            	</p>
            	<p>
            		“技术只是载体，艺术风格才是动漫作品的灵魂。”沈乐平总导演，玄机科技掌门人、2011年中国动漫新锐，以塑造动漫灵魂之高要求带领全体玄机科技团队执着于每一个场景细节、每一个镜头设计，每一个构图光影，每一个动作表情，以“更专业、更精美、更文化、更国际”的姿态，致力于以动漫为载体，向世界展示中华文化之美，令世界侧目于中国动漫的破茧成蝶。
            	</p>
            	<p><br/></p>            
			</span>
            </div>
            <!-- 内容 -->
            <div class="con">
                <div :class="content.className" v-for="content in content">
                    <img :src="content.imgSrc">
                </div>
            </div>
            <div class="wok">
                <div :class="work.className" v-for="work in work">
                    <img :src="work.src">
                </div>
            </div>
            <div class="syn">
                <p v-for="synList in synList">{{synList}}</p>
                <p><br/></p>
            </div>
            <div class="word">
                <img :src="wordSrc" alt="">
            </div>
            <div class="brand">
                <img :src="brandSrc" alt="">
            </div>
            <ul class="avg">
                <li v-for="avgList in avgList">
                    <a href="#">
                        <img :src="avgList" alt="">
                    </a>
                </li>

            </ul>
        </main>

        <!-- 底部区域 -->
        <div class="footer w">
            <!-- 左侧 -->
            <div class="bottomLeft">
                <a></a>
            </div>
            <!-- 右侧 -->
            <div class="bottomRight">
                <ul>
                    <li>
                        <a href="#" v-for="bottomList in bottomList"> {{bottomList}} <span>|</span></a>

                    </li>
                    <li v-for="textList in textList">
                        <a href="#">{{textList}}</a>
                    </li>
                    <li>
                        <a href="#">
                            <img :src="bottomLogo" alt="">{{tel}}
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    </div>
</body>

</html>